<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
         #home {

            height: 500px;
            background-color: red;
        }


         #profile {
             height: 500px;
             background-color: blue;
         }

       #one {
           width: 100%;
           height: 100%;

           background-color: #4cae4c;

       }

       #two {
           display: inline-block;
           width: 20%;
           height: 100%;

       }

       #three {
           float: right;
           display: inline-block;
           width: 80%;
           height: 100%;
           background-color: green;
       }


    </style>
</head>
<body>


<div id="one">

   <div id="two">





           <li class="active"><a href="#home" data-toggle="tab" >首页</a></li>
           <li><a href="#profile" data-toggle="tab">最新</a></li>
           <li><a href="#message" data-toggle="tab">热门</a></li>
           <li  ><a href="#settings" data-toggle="tab" >排行</a></li>


   </div>


    <div class="tab-content" id="three">
        <div class="tab-pane active" id="home">
            <p> 我是首页</p>
        </div>
        <div class="tab-pane" id="profile">
            <p> 我是最新 </p>
        </div>
        <div class="tab-pane" id="message">
            <p>我是热门</p>
        </div>
        <div class="tab-pane" id="settings">
            <p>我是排行</p>
        </div>
    </div>


</div>



<script>

    $('#profile').click(function (){

        document.getElementById('profile').setAttribute('class',"active")


    })


</script>


</body>
</html>